<script setup>
import { reactive } from "vue";
import imgGame1 from "../src/assets/image/game1.png";
import imgGame2 from "../src/assets/image/game2.png";
import imgGame3 from "../src/assets/image/game3.png";
import imgGame4 from "../src/assets/image/game4.png";

import imgApp1 from "../src/assets/image/app1.png";
import imgApp2 from "../src/assets/image/app2.png";
import imgApp3 from "../src/assets/image/app3.png";
import imgApp4 from "../src/assets/image/app4.png";

// 构造横向列表数据
const imgGameList = [imgGame1, imgGame2, imgGame3, imgGame4];
const gameList = [];
for (let i = 0; i < 10; i++) {
  gameList.push({
    img: imgGameList[i % 4],
    name: `游戏${i + 1}名称`,
    type: `游戏`,
  });
}

// 构造纵向列表数据
const imgAppList = [imgApp1, imgApp2, imgApp3, imgApp4];
const name = [
  "盛唐幻夜-盛唐幻夜",
  "美团外卖-美团外卖",
  "王者荣耀-王者荣耀",
  "UNI-UNI",
];
const appType = ["游戏", "美食佳饮", "生活风格", "摄影"];
const scale = [5, 4.5, 3.5, 4];
const down = [1999, 245, 1307, 98];
const developer = ["小明", "TOM", "开发者1", "开发者2"];
const intro = [
  "盛唐幻夜-描述1",
  "美团外卖-描述2",
  "王者荣耀-描述3",
  "UNI-描述4",
];
const appListStatic = [];
for (let i = 0; i < 100; i++) {
  // state.list.push(state.list.length + 1);
  appListStatic.push({
    img: imgGameList[i % 4],
    name: name[i % 4],
    type: appType[i % 4],
    scale: scale[i % 4],
    down: down[i % 4],
    developer: developer[i % 4],
    intro: intro[i % 4],
  });
}
const appList = [...appListStatic];
// 搜索框事件
const onSearch = (v) => {
  const arr = appListStatic.filter((item) => {
    return (
      item.name.indexOf(v) > -1 ||
      item.developer.indexOf(v) > -1 ||
      item.intro.indexOf(v) > -1
    );
  });
  state.appList = arr;
};

const state = reactive({
  value: "",
  gameList,
  appList,
});
</script>

<template>
  <div class="wrap">
    <div class="searchWrap">
      <van-search
        class="searchBar"
        v-model="value"
        shape="round"
        placeholder="Search..."
        @update:model-value="onSearch"
      />
    </div>
    <div class="gameWrap">
      <p class="title">Recommend</p>
      <div class="gameListSlide">
        <ul class="gameList">
          <li v-for="(item, index) in gameList" :key="index">
            <img class="img" :src="item.img" alt="" />
            <p class="p1">{{ item.name }}</p>
            <p class="p2">{{ item.type }}</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="appLiWrap" v-for="(item, index) in state.appList" :key="index">
      <div class="appLi">
        <p class="num">{{ index + 1 }}</p>
        <img class="i1" :src="item.img" alt="" />
        <div class="intro">
          <p class="name">{{ item.name }}</p>
          <p class="type">{{ item.type }}</p>
          <div class="scale">
            <van-rate
              allow-half
              :size="16"
              color="#ffd21e"
              v-model="item.scale"
            />
            <span class="downNum">（{{ item.down }}）</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.searchWrap {
  border-bottom: 1px solid #eee;
  padding-bottom: 4px;
}
:deep(.searchBar) {
  .van-cell {
    height: 60px;
    font-size: 20px;
  }
  .van-icon {
    font-size: 20px;
  }
}
.gameWrap {
  font-size: 28px;
  border-bottom: 1px solid #eee;
  .title {
    padding: 20px 0;
    padding-left: 32px;
  }
  .gameListSlide {
    overflow: auto;
    .gameList {
      display: flex;
      padding: 0 14px;
      li {
        width: 180px;
        padding: 0px 14px;
        padding-bottom: 30px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        .img {
          width: 180px;
          height: 180px;
          border-radius: 32px;
        }
        .p1 {
          line-height: 50px;
          font-size: 24px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 100px;
        }
        .p2 {
          line-height: 28px;
          font-size: 24px;
          color: #999;
        }
      }
    }
  }
}
.appLi {
  text-align: left;
  display: flex;
  margin: 32px;
  border-bottom: 1px solid #eee;
  padding: 16px 0;
  .num {
    width: 60px;
    line-height: 120px;
    font-size: 24px;
  }
  .i1 {
    width: 120px;
    height: 120px;
  }
  .intro {
    padding-left: 24px;
  }
  .name {
    line-height: 40px;
    font-size: 28px;
    color: #333;
  }
  .type {
    line-height: 40px;
    font-size: 24px;
    padding-bottom: 6px;
  }
  .scale {
    .downNum {
      font-size: 20px;
    }
  }
}
.appLiWrap:nth-of-type(even) .i1 {
  border-radius: 28px;
}
.appLiWrap:nth-last-of-type(1) .appLi {
  border-bottom: none;
}
</style>
